import React, {Component, createRef} from 'react';

class Header extends Component {

  inputRef = createRef()

  onKeyDown = (e) => {
    if (e.keyCode === 13) {
      this.props.addTodo(e.target.value)
      e.target.value = ''
    }
  }


  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          ref={this.inputRef}
          onKeyDown={this.onKeyDown}
          className="new-todo"
          placeholder="What needs to be done?"
          autoFocus
        />
      </header>
    );
  }
}

export default Header;
